<template>
  <div class="page-container">
    <!-- 缩放容器：承载所有内容，基于原9600*2240分辨率 -->
    <div class="scale-container">
      <!-- 顶部标题 -->
      <div class="headTitle">{{ headTitle }}</div>
      <div class="headButton" @click="backHome"></div>
      <div class="left1" @click="goToService('changzhou')"></div>
      <div class="right1" @click="goToService('wuhan')"></div>
      <!-- 左边内容 -->
      <div class="left">
        <div class="box">
          <div class="headImg"></div>
          <div class="title">中汽研新能源汽车检验中心(天津)有限公司</div>
          <div class="content">
            <div class="carousel-image-wrapper">
              <img :src="images[currentIndex]" alt="轮播图" class="carousel-image">
            </div>
            <div class="carousel-dots">
              <span v-for="(img, idx) in images" :key="idx" class="dot" :class="{ active: currentIndex === idx }"
                @click="currentIndex = idx"></span>
            </div>
            <p class="contentTitle">
              中汽研新能源汽车检验中心（天津）有限公司（简称“新能源检验中心”）是中汽中心全资子公司，
              是中汽中心新能源汽车科技创新基地的运营主体。公司坚持“技术领先、产品领先、管理领先、服务领先”四个领先发展方向，面向智电汽车产业链和氢能汽车产业链，发挥“标准法规、测试评价、科技创新、行业平台”综合优势，为全行业提供新能源汽车产品检测认证、研发验证、产品工程评价等全方位技术服务。
              新能源汽车科技创新基地占地约308亩，总建筑面积约14.6万平米，建设新能源整车、电磁兼容、充电技术、动力电池、燃料电池、电驱电控等20余栋综合试验室以及科研中心、能源中心等配套设施，具备新能源汽车全研发流程链、全产品链、全生命周期和全应用领域的测试评价验证能力。
            </p>
          </div>
        </div>
        <div class="box2">
          <div class="headImg"></div>
          <div class="title">人才队伍</div>
          <div class="content">
            <div class="leftbox">
              <div class="box1-1">
                <div class="img2"></div>
                <div class="text">
                  <span class="title1-1">首席科学家（<span class="value">1人</span>）</span>
                  <span class="title1-1">首席专家（<span class="value">3人</span>）</span>
                  <span class="title1-1">学科后备带头人（<span class="value">3人</span>）</span>
                  <span class="title1-1">青年科技骨干（<span class="value">51人</span>）</span>
                </div>
              </div>
              <div class="box1-2">
                公司现有以王芳博士为代表的<span style="color: #FF4A4A;font-family: '微软雅黑粗体';">国家级科技领军人才</span>、中汽中心首席科学家<span
                  style="color: #FFA133;font-family: '微软雅黑粗体';">1人</span>，中汽中心首席专家<span
                  style="color: #FFA133;">3</span>人，学科后备带头人<span
                  style="color: #FFA133;font-family: '微软雅黑粗体';">21</span>人，青年科技骨干<span
                  style="color: #FFA133;font-family: '微软雅黑粗体';">51人</span>，人才梯队成员占总人数比例达<span
                  style="color: #FFA133;font-family: '微软雅黑粗体';">34%</span>。
              </div>
            </div>
            <div class="rightbox">
              <piechartKj3D class="box1-1" :datalist="pieData2">
              </piechartKj3D>
              <div class="box1-2">
                新能源检验中心现有员工<span style="color: #FF4A4A;font-family: '微软雅黑粗体';">225人</span>，<span
                  style="color: #FF4A4A;font-family: '微软雅黑粗体';">研究生</span>及以上学历人员占比达<span
                  style="color: #FF4A4A;font-family: '微软雅黑粗体';">63%</span>;技术人员占比超<span
                  style="color: #FF4A4A;font-family: '微软雅黑粗体';">90%</span>;中级及以上职称人员占比达<span
                  style="color: #FF4A4A;font-family: '微软雅黑粗体';">70%</span>。
              </div>
            </div>
          </div>
        </div>
        <div class="box3">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">资质荣誉</div>
          </div>
          <!-- 第一列滚动容器 -->
          <div class="content">
            <div class="scroll-container" data-type="qualification" data-col="1">
              <div class="scroll-item">
                <img class="img1" src="/imgs/tianjinnewenergy/1.png" />
                <p class="contentTitle">高新技术企业证书</p>
              </div>
              <div class="scroll-item">
                <img class="img1" src="/imgs/tianjinnewenergy/2.png" />
                <p class="contentTitle">检测检验机构资质认定证书</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
          <!-- 第二列滚动容器 -->
          <div class="content" style="margin-left: 1100px;">
            <div class="scroll-container" data-type="qualification" data-col="2">
              <div class="scroll-item">
                <img class="img1" src="/imgs/tianjinnewenergy/3.png" />
                <p class="contentTitle">天津市就业见习基地</p>
              </div>
              <div class="scroll-item">
                <img class="img1" src="/imgs/tianjinnewenergy/4.png" />
                <p class="contentTitle">天津市科技领军培育企业</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
          <!-- 第三列滚动容器 -->
          <div class="content" style="margin-left: 2100px;">
            <div class="scroll-container" data-type="qualification" data-col="3">
              <div class="scroll-item">
                <img class="img1" src="/imgs/tianjinnewenergy/5.png" />
                <p class="contentTitle">中国合格评定国家认可委员会认可决定书</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间内容 -->
      <div class="middle">
        <div class="img1"></div>
        <div class="img2"></div>
        <div class="content">
          <div class="years">2020.04</div>
          <div class="values">中汽研新能源汽车检验中心（天津）有限公司成立</div>
        </div>
        <div class="content2">
          <div class="years">2020.05</div>
          <div class="values">中汽中心新能源汽车科技创新基地建设项目启动</div>
        </div>
        <div class="content3">
          <div class="years">2022.09</div>
          <div class="values">中汽中心新能源汽车科技创新基地正式启用 </div>
        </div>
        <div class="content4">
          <div class="years">2023.04</div>
          <div class="values">科研中心全面建成，打造新能源汽车产业创新港（天津）</div>
        </div>
        <div class="content5">
          <div class="years">2023.11</div>
          <div class="values">发布国内首个新能源汽车电安全技术验证体系（NESTA）</div>
        </div>
        <div class="content6">
          <div class="years">2024.07</div>
          <div class="values">获得第六批国家级专精特新“小巨人”企业称号</div>
        </div>
        <div class="content7">
          <div class="years">2025.05</div>
          <div class="values">新能源科技创新基地展厅启用</div>
        </div>
        <div class="content15">中汽研新能源汽车检验中心（天津）有限公司</div>
        <div class="content18">
          <div class="tubiao1"></div>
          <span class="tubiaoTitle">占地面积<span class="tubiaoValue">308</span>亩</span>
          <div class="tubiao2"></div>
          <span class="tubiaoTitle">建筑面积<span class="tubiaoValue">14.6万</span>㎡</span>
          <div class="tubiao3"></div>
          <span class="tubiaoTitle">员工人数<span class="tubiaoValue">225</span>人</span>
        </div>
        <div class="content19">
          <div class="img1"></div>
          <div class="img2"></div>
          <div class="img3"></div>
          <span class="title">天津</span>
          <div class="pointImg"></div>
          <div class="img4"></div>
          <div class="img5"></div>
          <div ref="lottieRef" class="lottie-box"></div>
        </div>
      </div>
      <!-- 右边内容 -->
      <div class="right">
        <div class="box">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">科研成果</div>
          </div>
        </div>
        <div class="box2">
          <div class="contentbox">获得省部级及以上奖项<span style="color: #FFA133;"> 25 </span>项；授权专利<span
              style="color: #FFA133;"> 91 </span>项；发布国际及国家标准 <span style="color: #FFA133;"> 57 </span>项；发表论文<span
              style="color: #FFA133;"> 100+ </span>篇。 </div>
          <div class="content">
            <img :key="currentImgIndex" :src="certificateImages[currentImgIndex]" alt="获奖证书" class="img">
            <div class="rightbox">
              <div class="content1-1">中国专利<span style="font-family: '微软雅黑粗体';color: #FF4A4A;">优秀奖</span></div>
              <div class="content1-1">天津市科技进步<span style="font-family: '微软雅黑粗体';color: #FF4A4A;">一等奖</span></div>
              <div class="content1-1">天津市科技进步<span style="font-family: '微软雅黑粗体';color: #FF4A4A;">二等奖</span></div>
              <div class="content1-1">中国汽车工程学会科学技术<span style="font-family: '微软雅黑粗体';color: #FF4A4A;">一等奖</span></div>
              <div class="content1-1">中国汽车工程学会科学技术<span style="font-family: '微软雅黑粗体';color: #FF4A4A;">二等奖</span></div>
              <div class="content1-1">中国质量协会质量技术奖<span style="font-family: '微软雅黑粗体';color: #FF4A4A;">三等奖</span></div>
            </div>
            <div class="text">获省部级及以上奖项25项</div>
          </div>
          <div class="content">
            <div class="img2"></div>
            <div class="img2"></div>
            <div class="text">授权专利91项，其中国际专利18项</div>
          </div>
          <div class="content">
            <div class="rightbox">
              <div class="content1-1">GB/T18488-2024电动汽车用驱动电机系统</div>
              <div class="content1-1">GB/Z 44116-2024燃料电池发动机及关键部件耐久性试验方法 </div>
              <div class="content1-1">GB/T 31486—2024电动汽车用动力蓄电池电性能要求及试验方法</div>
              <div class="content1-1">GB/T 17692-2024汽车发动机及驱动电机净功率测试方法</div>
              <div class="content1-1">中国汽车工程学会科学技术二等奖</div>
              <div class="content1-1">GB/T 44119-2024辐射骚扰1m法天线系数测量方法</div>
            </div>
            <div class="text">发布标准国际及国家标准57项</div>
          </div>
          <div class="content">
            <div class="rightbox">
              <div class="content1-1">A high-fidelity lithium-ion battery emulator for electric vehicle application
              </div>
              <div class="content1-1">Analysis on failure test and evaluation about refueling receptacle of onboard
                hydrogen system</div>
              <div class="content1-1">基于大数据的燃料电池汽车关键性能与衰减预测工况约束的燃料电池多堆系统寿命优化方法</div>
            </div>
            <div class="text">发表论文100余篇，其中SCI15篇</div>
          </div>
        </div>
        <div class="box3">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">业务体系</div>
          </div>
          <div class="content">
            <div class="contentimg1"></div>
            <div class="text">新能源检验中心在深挖客户需求的基础上，全面打造“检测认证+研发验证+产品工程评价”三支柱业务布局，并保持持续迭代更新，实现可持续发展。</div>
            <div class="text2"><span style="color: #FFA133;">2</span>面向智电汽车和氢能汽车产业链</div>
            <div class="text3"><span style="color: #FFFD3D;">12</span>项服务品类务</div>
            <div class="text4"><span style="color: #6EFF51;">全生命周期</span>测试服务对象+<span
                style="color: #6EFF51;">3</span>大技术产品</div>
            <div class="text6"><span style="color: #49D2FF;">5</span>大业务领域</div>
            <div class="content1-1">三支柱业务布局</div>
            <div class="contentbox1">
              <div class="content1-1">产品鉴定</div>
              <div class="content1-1">委托试验</div>
              <div class="content1-1">工程分析</div>
            </div>
            <div class="contentbox2">
              <div class="content2-1">对标检测</div>
              <div class="content2-1">公告检测</div>
              <div class="content2-1">型式试验</div>
              <div class="content2-1">开发验证</div>
              <div class="content2-1">性能评价</div>
              <div class="content2-1">产品力评价</div>
              <div class="content2-1">产品鉴定</div>
              <div class="content2-1">一致性监督</div>
              <div class="content2-1">委托试验</div>
              <div class="content2-1">技术研究</div>
              <div class="content2-1">工程分析</div>
              <div class="content2-1">大数据分析</div>
            </div>
            <div class="contentbox3">
              <div class="content3-1">针对器件/单体、部件、系统、整车进行检测认证及研发验证试验</div>
              <div class="content3-1">针对高标准电安全-NESTA、高品质三电系统-PREMIUM、用户高频场景-CCTA，开展产品工程评价测试</div>
            </div>
            <div class="contentbox4">
              <div class="content4-1" v-for="(item, index) in rightbox1" :key="index">
                <div class="img1"></div>
                <div class="title">{{ item.title }}</div>
                <img class="img2" :src="item.img2" alt= />
              </div>
            </div>
          </div>
        </div>
        <div class="box4">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">产品体系</div>
          </div>
          <div class="content">
            <div class="contentimg1"></div>
            <div class="text">纵深推进“检测认证+研发验证+产品工程评价”三支柱业务布局，其中在<span
                style="font-family: '微软雅黑常规';">“产品工程评价”</span>领域创新开展<span
                style="font-family: '微软雅黑常规';">“技术价值挖掘”与“技术价值传递</span>，建立<span
                style="font-family: '微软雅黑常规';">“新能源检验中心技术产品验证体系”</span>，服务新能源汽车安全品质提升，赋能客户价值品牌提升，<span
                style="font-family: '微软雅黑常规';">建设全球“电安全”第一评价品牌！</span></div>
            <div class="text2">产品标签</div>
            <div class="text3">矩阵定位</div>
            <div class="text4">产品价值</div>
            <div class="text5">应对需求</div>
            <div class="text6">核心产品</div>
            <div class="content1-1">新能源检验中心SQE产品体系</div>
            <div class="contentbox1">
              <div class="content1-1" style="color: #49D2FF;">安全（S）</div>
              <div class="content1-1" style="color: #FFA133;">性能（Q）</div>
              <div class="content1-1" style="color: #FF6666;">体验（E）</div>
            </div>
            <div class="contentbox2">
              <div class="content2-1" style="color: #49D2FF;">围绕安全防护能力进行验证助力客户产品力提升</div>
              <div class="content2-1" style="color: #FFA133;">围绕整车/零部件/系统性能认证 聚焦性能参数与稳定性</div>
              <div class="content2-1" style="color: #FF6666;">围绕安全防护能力进行验证助力客户产品力提升</div>
              <div class="content2-1" style="color: #49D2FF;">信任度背书、安全挑战传播</div>
              <div class="content2-1" style="color: #FFA133;">用数据让性能变得可感知</div>
              <div class="content2-1" style="color: #FF6666;">助力品牌定调、价值向上</div>
              <div class="content2-1" style="color: #49D2FF;">权威机构安全背书、安全试验策划</div>
              <div class="content2-1" style="color: #FFA133;">权威机构安全背书、安全试验策划</div>
              <div class="content2-1" style="color: #FF6666;">权威机构安全背书、安全试验策划</div>
            </div>
            <div class="contentbox4">
              <div class="content4-1" v-for="(item, index) in rightbox2" :key="index">
                <img class="img2" :src="item.img2" alt= />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick, onUnmounted, onBeforeUnmount } from "vue";
import lottie from 'lottie-web';
//路由
import { useRouter } from 'vue-router'
const router = useRouter();
//跳转路由
const backHome = () => {
    router.push({ name: 'home' })
}
import piechartKj3D from "../../components/chart/chartPie.vue";
// 证书图片数组（实际项目中替换为真实图片路径）
const certificateImages = ref([
  '/imgs/tianjinnewenergy/图片1.png',
  '/imgs/tianjinnewenergy/图片2.png',
  '/imgs/tianjinnewenergy/图片3.png',
  '/imgs/tianjinnewenergy/图片4.png',
  '/imgs/tianjinnewenergy/图片5.png',
  '/imgs/tianjinnewenergy/图片6.png',
  '/imgs/tianjinnewenergy/图片7.png',
]);
const rightbox1 = [
  {
    title: "电磁兼容领域",
    img2: '/imgs/tianjinnewenergy/电磁兼容领域.png',
  },
  {
    title: "动力电池领域",
    img2: '/imgs/tianjinnewenergy/动力电池领域.png',
  },
  {
    title: "电驱电控领域",
    img2: '/imgs/tianjinnewenergy/电驱电控领域.png',
  },
  {
    title: "充电技术领域",
    img2: '/imgs/tianjinnewenergy/充电技术领域.png',
  },
  {
    title: "氢能与燃料电池领域",
    img2: '/imgs/tianjinnewenergy/氢能与燃料电池领域.png',
  }
];
const rightbox2 = [
  {
    img2: '/imgs/tianjinnewenergy/安全.png',
  },
  {
    img2: '/imgs/tianjinnewenergy/体验.png',
  },
  {
    img2: '/imgs/tianjinnewenergy/性能.png',
  },
];
// 当前显示的图片索引
const currentImgIndex = ref(0);
// 切换计时器
let switchTimer = null;
// 自动切换图片
const startAutoSwitch = () => {
  switchTimer = setInterval(() => {
    currentImgIndex.value = (currentImgIndex.value + 1) % certificateImages.value.length;
  }, 5000); // 每5秒切换一次
};
//饼图2参数
const pieData2 = ref([
  { name: "中级工程师", value: 41, itemStyle: { color: "#737373" } },
  { name: "高级工程师", value: 22, itemStyle: { color: "#FD7D3F" } },
  { name: "正高级工程师", value: 7, itemStyle: { color: "#65D0E4" } },
  { name: "其他", value: 10, itemStyle: { color: "#4DAFD2" } },
  { name: "助理工程师", value: 20, itemStyle: { color: "#FFB606" } },
]);
const headTitle = ref('中国汽车技术研究中心有限公司数字沙盘')
// 1. 轮播图片数据（替换为你的实际图片路径）
const images = ref([
  'imgs/wuhan/轮播一.jpg',  // 第一张图（示例图中的赛道图）
  'imgs/wuhan/轮播二.jpg',  // 第二张图
  'imgs/wuhan/轮播三.png',  // 第三张图（根据实际数量增减）
]);
// 2. 响应式状态：当前显示的图片索引
const currentIndex = ref(0);
// 定时器标识（用于自动切换）
let carouselTimer = null;
// 3. 自动切换逻辑：每5秒切换到下一张
const autoSwitch = () => {
  // 计算下一张索引（最后一张切换到第一张）
  currentIndex.value = (currentIndex.value + 1) % images.value.length;
};
// 响应式数据
const lottieRef = ref(null);
let animationInstance = null;
// 响应式状态：控制弹窗显示
const showVideo = ref(false);
// 视频DOM引用（用于控制播放/暂停）
const videoRef = ref(null);
// 视频地址（待提供，先定义变量占位）
const videoUrl = ref('');
// 初始化 Lottie 动画
const initLottieAnimation = () => {
  if (lottieRef.value) {
    animationInstance = lottie.loadAnimation({
      container: lottieRef.value,
      path: '/animations/tianjinnewenergy.json',
      loop: true,
      autoplay: true,
    });
  }
};

// 修改initScrollAnimations函数，实现不同数量条目下的同步滚动
const initScrollAnimations = () => {
  const containers = Array.from(document.querySelectorAll('.scroll-container'));
  if (containers.length === 0) return;
  // 全局配置（所有容器共享的滚动节奏）
  const pauseTime = 2500; // 统一停顿时间（2.5秒）
  const scrollDuration = 500; // 统一滚动动画时间（0.5秒）
  let isAnimating = false; // 全局动画锁，防止并发滚动
  let globalTimer = null; // 全局计时器控制同步节奏
  // 为每个容器初始化独立状态（记录自己的进度）
  const containerStates = containers.map(container => {
    const items = Array.from(container.querySelectorAll('.scroll-item:not(.copy-first)'));
    const itemCount = items.length;
    // 复制第一个条目用于自己的无缝循环
    const copyFirst = container.querySelector('.copy-first');
    copyFirst.innerHTML = items[0] ? items[0].innerHTML : '';
    copyFirst.style.display = itemCount > 0 ? 'flex' : 'none';
    return {
      container, // 容器DOM
      items, // 自己的条目列表
      itemCount, // 自己的条目总数（如3或8）
      currentIndex: 0, // 自己当前的索引
      width: container.offsetWidth // 自己的宽度（支持不同列宽度）
    };
  });
  // 同步触发所有容器滚动（各自走自己的下一个索引）
  const scrollAll = () => {
    if (isAnimating) return;
    isAnimating = true;
    // 每个容器计算自己的下一个索引和目标位置
    containerStates.forEach(state => {
      if (state.itemCount === 0) return; // 无内容则不滚动
      // 计算自己的下一个索引（独立循环）
      let nextIndex = state.currentIndex + 1;
      // 目标位置：如果是最后一个条目，下一个滚动到复制的条目（用于无缝循环）
      const targetPosition = nextIndex <= state.itemCount
        ? -nextIndex * state.width
        : -state.itemCount * state.width; // 最后一个条目后，先滚动到复制的条目
      // 应用滚动（所有容器同时开始动画）
      state.container.style.transition = `transform ${scrollDuration}ms ease`;
      state.container.style.transform = `translateX(${targetPosition}px)`;
      // 更新自己的索引（临时存为nextIndex，动画结束后确认）
      state.tempNextIndex = nextIndex;
    });
    // 动画结束后处理每个容器的状态（独立复位）
    setTimeout(() => {
      containerStates.forEach(state => {
        if (state.itemCount === 0) return;
        // 如果滚动到了复制的条目（超出自己的条目总数），则无缝复位
        if (state.tempNextIndex > state.itemCount) {
          state.container.style.transition = 'none'; // 取消动画，瞬间复位
          state.container.style.transform = 'translateX(0)';
          state.currentIndex = 0; // 重置为第一个条目
          // 重新启用过渡效果（下次滚动生效）
          setTimeout(() => {
            state.container.style.transition = `transform ${scrollDuration}ms ease`;
          }, 50);
        } else {
          // 正常更新索引
          state.currentIndex = state.tempNextIndex;
        }
      });
      isAnimating = false;
      startGlobalTimer(); // 所有容器处理完后，启动下一次全局计时
    }, scrollDuration);
  };
  // 全局计时器：控制所有容器同步停顿后滚动
  const startGlobalTimer = () => {
    clearTimeout(globalTimer);
    globalTimer = setTimeout(scrollAll, pauseTime);
  };
  // 全局暂停/继续：鼠标悬停任何容器，所有容器一起暂停
  containers.forEach(container => {
    container.addEventListener('mouseenter', () => {
      clearTimeout(globalTimer);
    });
    container.addEventListener('mouseleave', () => {
      if (!isAnimating) {
        startGlobalTimer();
      }
    });
  });
  // 初始启动
  startGlobalTimer();
};
//跳转路由
const goToService = (item) => {
  router.push({ name: item })
}
onMounted(() => {
  // 初始延迟5秒后开始自动切换，之后每5秒一次
  carouselTimer = setInterval(autoSwitch, 5000);
  startAutoSwitch();
  initLottieAnimation();
  // 等待DOM完全渲染后初始化滚动动画
  nextTick(() => {
    initScrollAnimations();
  });
})
// 组件销毁时清除定时器（防止内存泄漏）
onUnmounted(() => {
  // 组件销毁时清除定时器，避免内存泄漏
  clearInterval(carouselTimer);
  clearInterval(switchTimer);
});
onBeforeUnmount(() => {
  // 清除计时器，避免内存泄漏
  if (switchTimer) {
    clearInterval(switchTimer);
  }
});
</script>
<style scoped>
/* 在原样式基础上添加/修改以下内容 */
.right .box .content {
  /* 移除绝对定位，避免布局冲突 */
  position: relative;
  overflow: hidden;
}

/* 滚动容器设置为水平布局 */
.scroll-container {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  /* 平滑过渡效果 */
}

/* 每个滚动项占满容器宽度，确保内容居中显示 */
.scroll-item {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 20px;
}

/* 确保图片和文字不超出边界 */
.scroll-item .img1,
.scroll-item .img2 {
  max-width: 40%;
  height: auto;
  object-fit: contain;
}

.scroll-item .contentTitle {
  max-width: 50%;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* 最多显示4行 */
  -webkit-box-orient: vertical;
}

/* 隐藏复制的条目（用于无缝循环） */
.copy-first {
  display: none;
}

/* 触发区域样式（保持原有） */
.box {
  cursor: pointer;
  /* 提示可点击 */
  /* 原有样式... */
}

@keyframes sweep {
  0% {
    background-position: -100%;
  }

  100% {
    background-position: 200%;
  }
}

/* 上下浮动动画 */
@keyframes floatUpDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
    /* 向下移动20px */
  }
}

/* 视频弹窗：全屏覆盖 */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 9600px;
  height: 2240px;
  background-color: rgba(0, 0, 0, 0.95);
  /* 深色背景突出视频 */
  z-index: 9999;
  /* 最高层级，覆盖所有内容 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

/* 视频播放器：自适应全屏 */
.video-player {
  width: 9600px;
  height: 2240px;
  /* 避免超出屏幕 */
  object-fit: contain;
  /* 保持视频比例，不拉伸 */
}

/* 关闭按钮 */
.video-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: all 0.3s;
}

.video-close:hover {
  background-color: #ff4d4f;
  /* hover时变红，增强交互 */
}

/* 禁止页面滚动（弹窗显示时） */
:deep(body) {
  overflow: v-bind('showVideo ? "hidden" : "auto"');
}


/* 可视区域容器：固定为目标分辨率6240*1456 */
.page-container {
  width: 6240px;
  height: 1456px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

/* 原始设计稿容器：基于9600*2240，通过缩放适配新分辨率 */
.scale-container {
  width: 9600px;
  height: 2240px;
  transform: scale(0.65);
  transform-origin: 0 0;
  position: relative;
}

.left1{
  z-index: 999;
  cursor: pointer;
  top: 45%;
  left: 10px;
  position: absolute;
  width: 94px;
  height: 258px;
  background-image: url("/imgs/home/left1.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.right1{
  z-index: 999;
  cursor: pointer;
  position: absolute;
  top: 45%;
  right: 10px;
  width: 94px;
  height: 258px;
  background-image: url("/imgs/home/right1.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.lottie-box {
  z-index: 99;
  position: absolute;
  left: 962px;
  top: 371px;
  width: 885px;
  height: 889px;
  font-size: 80px;
}

.headTitle {
  text-align: center;
  position: relative;
  top: -24px;
  font-size: 130px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #FFFFFF;
  background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.headButton {
    cursor: pointer;
    display: flex;
    float: inline-end;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 78px;
    height: 78px;
    background-image: url("/imgs/ningbo/cancel.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.left {
  display: flex;

  .box {
    margin-left: 140px;
    display: flex;
    width: 1372px;
    height: 168px;
    background-image: url("/imgs/ningbo/t.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .headImg {
      margin-left: 220px;
      margin-top: 41px;
      width: 53px;
      height: 58px;
      background-image: url("/imgs/ningbo/菱形 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title {
      width: 100%;
      margin-left: 30px;
      margin-top: 22px;
      height: 49px;
      font-family: "微软雅黑粗体";
      font-weight: 400;
      font-size: 57px;
      color: #FFFFFF;
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      position: absolute;
      top: 378px;
      width: 1476px;
      height: 1096px;
      background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .carousel-container {
        width: 100%;
        max-width: 1200px;
        /* 根据实际场景调整 */
        margin: 0 auto;
        background-color: #051428;
        /* 深色背景，贴合设计风格 */
        border: 1px solid #1e4b79;
        border-radius: 8px;
        overflow: hidden;
        padding-bottom: 20px;
      }

      /* 图片容器样式 */
      .carousel-image-wrapper {
        border-radius: 10px;
        width: 1408px;
        height: 645px;
        position: relative;
        overflow: hidden;
      }

      .carousel-image {
        border-radius: 10px;
        width: 1408px;
        height: 645px;
        object-fit: cover;
        /* 图片自适应填充，保持比例 */
      }

      /* 圆点指示器样式 */
      .carousel-dots {
        cursor: pointer;
        position: absolute;
        top: 52%;
        display: flex;
        gap: 20px;
        z-index: 10
      }

      .dot {
        display: flex;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        /* 圆形 */
        background-color: #919FA7;
        /* 未激活状态：半透明白色 */
        cursor: pointer;
        transition: all 0.3s;
        /* 切换动画 */
      }

      .dot.active {
        background-color: #70C3F5;
        /* 激活状态：亮蓝色（贴合科技感） */
        transform: scale(1.2);
        /* 激活时略微放大 */
      }

      .img1 {
        width: 1408px;
        height: 645px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: justify;
        text-justify: inter-ideograph;
        position: relative;
        /* line-height: 60px; */
        top: -168px;
        text-indent: 3.5ch;
        width: 1356px;
        height: 100px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 31px;
        color: #FFFFFF;
      }
    }
  }

  .box2 {
    margin-left: 132px;
    display: flex;
    width: 1372px;
    height: 168px;
    background-image: url("/imgs/ningbo/t.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .headImg {
      margin-left: 220px;
      margin-top: 41px;
      width: 53px;
      height: 58px;
      background-image: url("/imgs/ningbo/菱形 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title {
      margin-left: 30px;
      margin-top: 22px;
      height: 49px;
      font-family: "微软雅黑粗体";
      font-weight: 400;
      font-size: 57px;
      color: #FFFFFF;
    }

    .content {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: flex-start;
      position: absolute;
      top: 378px;
      width: 1476px;
      height: 1096px;
      background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      align-items: anchor-center;
      gap: 50px;

      .leftbox {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 30px;

        .box1-1 {
          display: flex;

          /* flex-direction: column; */
          .img2 {
            width: 543px;
            height: 567px;
            background-image: url("/imgs/tianjinnewenergy/图层 1308.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }

          .text {
            display: flex;
            flex-direction: column;
            gap: 90px;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 376px;
            top: 342px;

            .title1-1 {
              text-align: center;
              position: relative;
              top: -129px;
              left: -55px;
              width: 159px;
              height: 25px;
              font-family: "微软雅黑常规";
              font-weight: bold;
              font-size: 25px;
              color: #FFFFFF;

              .value {
                width: 64px;
                height: 26px;
                font-family: "微软雅黑常规";
                font-weight: bold;
                font-size: 25px;
                color: #FFFC00;
              }
            }
          }

        }

        .box1-2 {
          padding: 30px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 31px;
          color: #FFFFFF;
          line-height: 44px;
          width: 634px;
          height: 282px;
          background-image: url("/imgs/tianjinnewenergy/矩形 1309.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }

      .rightbox {
        display: flex;
        flex-direction: column;
        gap: 20px;

        .box1-1 {
          width: 534px !important;
          height: 582px !important;
        }

        .box1-2 {
          padding: 30px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 31px;
          color: #FFFFFF;
          line-height: 44px;
          width: 634px;
          height: 282px;
          background-image: url("/imgs/tianjinnewenergy/矩形 1309.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
    }
  }

  .box3 {
    display: flex;
    position: absolute;
    margin-top: 1256px;
    margin-left: 132px;
    display: flex;

    /* margin-left: 76px;
    display: flex;
    position: relative;
    top: 530px;
    flex-wrap: wrap; */
    flex-direction: row;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      /* 关键：背景固定，不随内容滚动 */
      margin-top: 166px;
      margin-left: 120px;
      position: absolute;
      width: 908px;
      height: 396px;
      background-image: url("/imgs/ningbo/图层 1014 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      overflow: hidden;

      .img1 {
        width: 234px;
        height: 305px;
      }

      .img2 {
        width: 400px;
        height: 277px;
      }

      .contentTitle {
        padding: 0 20px;
        width: 300px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 30px;
        color: #FFFFFF;
        line-height: 63px;
        text-align: left;
      }

      /* 滚动容器：用于承载滚动内容 */
      .scroll-container {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }

      /* 单个滚动项：确保内容正确显示 */
      .scroll-item {
        align-items: center;
        justify-content: space-between;
        width: 98%;
        /* height: 350px; */
        display: flex;
        align-items: center;
      }

      /* 图片和文字样式保持不变，确保在滚动项中居中 */
      .img1 {
        margin: 0 auto !important;
        width: 400px;
        height: 277px;
      }

      .img2 {
        margin: 0 auto !important;
        width: 400px;
        height: 277px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: left;
        width: 300px;
        font-size: 30px;
        text-align: center;
      }

      /* 复制的第一个条目初始隐藏 */
      .copy-first {
        display: none;
      }
    }

  }
}

.middle {
  position: absolute;
  left: 3364px;
  top: 257px;
  width: 2874px;
  height: 521px;
  background-image: url("/imgs/ningbo/矩形 606.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .img1 {
    position: relative;
    left: 105px;
    top: 135px;
    width: 485px;
    height: 160px;
    background-image: url("/imgs/tianjinnewenergy/标记 (1).png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .img2 {
    position: relative;
    left: 800px;
    top: 20px;
    width: 1858px;
    height: 75px;
    background-image: url("/imgs/guangzhou/heng.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .content {
    top: -159px;
    left: 768px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content2 {
    top: -74px;
    left: 1123px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content3 {
    top: -352px;
    left: 1480px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content4 {
    top: -281px;
    left: 1827px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 250px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content5 {
    top: -566px;
    left: 2054px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 250px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content6 {
    top: -480px;
    left: 2369px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 250px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content7 {
    top: -746px;
    left: 2569px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 250px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }



  .content15 {
    display: flex;
    transform: translateX(70%);
    position: absolute;
    top: 420px;
    /* left: 238px; */
    font-family: FZLanTingHeiS-B-GB;
    font-weight: 400;
    font-size: 53px;
    color: #FFFFFF;
    background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 1200px;
  }

  .content18 {
    top: 550px;
    z-index: 999;
    display: flex;
    position: absolute;
    justify-content: center;
    align-content: center;
    justify-self: anchor-center;
    /* left: 97px; */
    z-index: 999;

    .tubiao1 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/tianjinnewenergy/组 7752 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao2 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/tianjinnewenergy/组 7752 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao3 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/tianjinnewenergy/图层 1578.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiaoTitle {
      margin-left: 20px;
      margin-right: 20px;
      position: relative;
      top: -29px;
      width: auto;
      font-family: FZLanTingHeiS-B-GB;
      font-weight: 400;
      font-size: 42px;
      color: #FFFFFF;
      background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
      -webkit-background-clip: text;

      .tubiaoValue {
        position: relative;
        top: 9px;
        margin-left: 20px;
        margin-right: 20px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 86px;
        color: #FFFFFF;
        -webkit-text-fill-color: transparent;
        background: linear-gradient(45deg,
            transparent 35%,
            rgba(#fff, 0.6),
            transparent 65%) no-repeat,
          currentColor;
        background-size: 50%;
        -webkit-background-clip: text;
        animation: sweep 2s infinite;
        background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .content19 {
    display: flex;
    position: absolute;
    top: 420px;
    left: 0;
    width: 2808px;
    height: 1641px;
    background-image: url("/imgs/ningbo/中间地球 2副本.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .img1 {
      position: absolute;
      left: 532px;
      top: 287px;
      width: 1467px;
      height: 1199px;
      background-image: url("/imgs/ningbo/组 7764.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img2 {
      transform: scaleX(1);
      position: relative;
      left: 1635px;
      top: 674px;
      width: 43px;
      height: 61px;
      background-image: url("/imgs/tianjinnewenergy/形状 1381 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img3 {
      z-index: 999;
      position: relative;
      left: 1595px;
      top: 666px;
      width: 34px;
      height: 45px;
      background-image: url("/imgs/ningbo/点位 (3).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img4 {
      position: absolute;
      left: -200px;
      top: 170px;
      width: 620px;
      height: 884px;
      background-image: url("/imgs/ningbo/CFL.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img5 {
      position: absolute;
      right: -200px;
      top: 170px;
      width: 620px;
      height: 884px;
      background-image: url("/imgs/ningbo/CFL.png");
      transform: scaleX(-1);
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }


    .title {
      left: 1679px;
      top: 618px;
      position: absolute;
      font-family: FZLanTingHeiS-B-GB;
      font-weight: 400;
      font-size: 38px;
      color: #FFFFFF;
      background: linear-gradient(0deg, #E9DD7A 100%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .pointImg {
      position: absolute;
      top: 348px;
      left: 895px;
      width: 918px;
      height: 933px;
      background-image: url("/imgs/home/地图层 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}

.right {
  display: flex;
  position: absolute;
  flex-direction: row;
  flex-wrap: wrap;
  left: 6300px;
  top: 200px;
  gap: 0 190px;

  .box {
    display: flex;
    flex-direction: row;
    margin-left: 73px;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }
  }

  .box2 {
    margin-left: 172px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;

    .contentbox {
      text-align: center;
      font-family: "微软雅黑粗体";
      font-size: 36px;
      color: #FFFFFF;
      line-height: 72px;
      width: 2946px;
      height: 75px;
      background-image: url("/imgs/tianjinnewenergy/矩形 933 拷贝 4.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .content {
      flex-direction: column;
      justify-content: center;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      align-items: center;
      align-self: end;
      width: 722px;
      height: 419px;
      gap: 12px;
      background-image: url("/imgs/tianjinnewenergy/矩形 933 拷贝 6.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .img {
        width: 181px;
        height: 257px;
        /* background-image: url("/imgs/tianjinnewenergy/矩形 933 拷贝 6.png"); */
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .img2 {
        width: 334px;
        height: 287px;
        background-image: url("/imgs/tianjinnewenergy/图片54.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .text {
        position: absolute;
        top: 609px;
        font-family: "微软雅黑常规";
        /* width: 525px; */
        font-weight: 400;
        font-size: 33px;
        color: #FFFFFF;
        line-height: 46px;
      }

      /* 新增：小白点样式 */
      .content1-1::before {
        content: '';
        display: inline-block;
        margin-right: 15px;
        /* 白点与文字的间距 */
        vertical-align: middle;
        width: 20px;
        height: 20px;
        background-image: url("/imgs/guangzhou/椭圆 767.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .rightbox {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .content1-1 {
          /* 核心修改：将水平居中改为左对齐 */
          justify-content: flex-start;
          /* 增加左侧内边距，让内容从左侧有一定缩进（根据视觉效果调整） */
          padding-left: 40px;
          /* 其他原有样式保留 */
          display: flex;
          align-items: center;
          height: 46px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          color: #FFFFFF;
          line-height: 40px;
          width: 400x;
          font-weight: 400;
          font-size: 19px;
          color: #FFFFFF;
        }
      }

    }
  }

  .box3 {
    margin-left: 76px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

    .headbox {
      display: flex;
      height: 158px;
      width: 1246px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      flex-wrap: wrap;
      flex-direction: column;
      display: flex;
      /* 关键：背景固定，不随内容滚动 */
      margin-top: 166px;
      margin-left: 120px;
      position: absolute;
      width: 1449px;
      height: 1040px;
      background-image: url("/imgs/tianjinnewenergy/矩形 1052 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .contentimg1 {
        position: absolute;
        transform: translateY(22%);
        margin-left: 267px;
        width: 1157px;
        height: 671px;
        background-image: url("/imgs/tianjinnewenergy/矩形 1052.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        overflow: hidden;
      }

      .text {
        position: relative;
        top: 33px;
        left: 60px;
        width: 1315px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 25px;
        color: #FFFFFF;
        line-height: 31px;
      }

      .text2 {
        position: relative;
        top: 215px;
        left: 60px;
        width: 131px;
        font-family: "微软雅黑粗体";
        font-size: 25px;
        color: #FFFFFF;
        line-height: 33px;
      }

      .text3 {
        position: relative;
        top: 315px;
        left: 60px;
        width: 131px;
        font-family: "微软雅黑粗体";
        font-size: 25px;
        color: #FFFFFF;
        line-height: 33px;
      }

      .text4 {
        position: relative;
        top: 455px;
        left: 60px;
        width: 151px;
        font-family: "微软雅黑粗体";
        font-size: 25px;
        color: #FFFFFF;
        line-height: 33px;
      }

      .text6 {
        position: relative;
        top: 535px;
        left: 60px;
        width: 131px;
        font-family: "微软雅黑粗体";
        font-size: 25px;
        color: #FFFFFF;
        line-height: 33px;
      }

      .content1-1 {
        position: relative;
        top: -250px;
        left: 730px;
        width: 231px;
        font-family: "微软雅黑粗体";
        font-size: 33px;
        color: #FFFFFF;
        line-height: 33px;
      }

      .contentbox1 {
        position: relative;
        left: -310px;
        top: 90px;
        display: flex;
        flex-direction: row;
        gap: 280px;

        .content1-1 {
          width: 112px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 28px;
          color: #FFA133;
          line-height: 33px;
        }
      }

      .contentbox2 {
        flex-wrap: wrap;
        position: relative;
        left: 326px;
        top: -22px;
        display: flex;
        flex-direction: row;
        gap: 56px;
        width: 1157px;

        .content2-1 {
          width: 129px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 25px;
          color: #FFFD3D;
          line-height: 33px;
        }
      }

      .contentbox3 {
        flex-wrap: wrap;
        position: relative;
        left: 326px;
        top: 80px;
        display: flex;
        flex-direction: row;
        gap: 56px;
        width: 1157px;

        .content3-1 {
          width: 489px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 21px;
          color: #6DFF50;
          line-height: 33px;
        }
      }

      .contentbox4 {
        position: relative;
        left: 272px;
        top: 113px;
        gap: 20px;
        display: flex;
        flex-direction: row;

        .content4-1 {
          text-align: center;
          display: flex;
          flex-direction: column;

          .img1 {
            height: 39px;
            width: 212px;
            background-image: url("/imgs/tianjinnewenergy/矩形 937 拷贝.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }

          .title {
            position: absolute;
            width: 194px;
            font-family: "微软雅黑粗体";
            font-size: 18px;
            color: #FFFFFF;
          }

          .img2 {
            height: 148px;
            width: 212px;
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
        }
      }
    }
  }

  .box4 {
    margin-left: 172px;
    display: flex;
    flex-direction: column;
    gap: 20px;

    .headbox {
      display: flex;
      height: 158px;
      width: 1246px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      flex-direction: row;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      align-items: center;
      gap: 20px;
      width: 1449px;
      height: 1040px;
      background-image: url("/imgs/tianjinnewenergy/组 7837.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .contentimg1 {
        position: absolute;
        transform: translateY(-11%);
        margin-left: 267px;
        width: 1157px;
        height: 470px;
        background-image: url("/imgs/tianjinnewenergy/组 7838.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        overflow: hidden;
      }

      .text {
        position: relative;
        top: -249px;
        left: 60px;
        width: 1315px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 25px;
        color: #FFFFFF;
        line-height: 31px;
      }

      .text2 {
        position: relative;
        top: -127px;
        left: 70px;
        width: 131px;
        font-family: "微软雅黑粗体";
        font-size: 25px;
        color: #FFFFFF;
        line-height: 33px;
      }

      .text3 {
        position: relative;
        top: -9px;
        left: -80px;
        width: 131px;
        font-family: "微软雅黑粗体";
        font-size: 25px;
        color: #FFFFFF;
        line-height: 33px;
      }

      .text4 {
        position: relative;
        top: 120px;
        left: -230px;
        width: 151px;
        font-family: "微软雅黑粗体";
        font-size: 25px;
        color: #FFFFFF;
        line-height: 33px;
      }

      .text5 {
        position: relative;
        top: 240px;
        left: -402px;
        width: 151px;
        font-family: "微软雅黑粗体";
        font-size: 25px;
        color: #FFFFFF;
        line-height: 33px;
      }

      .text6 {
        position: relative;
        top: 450px;
        left: -571px;
        width: 131px;
        font-family: "微软雅黑粗体";
        font-size: 25px;
        color: #FFFFFF;
        line-height: 33px;
      }

      .content1-1 {
        position: relative;
        top: -205px;
        left: -231px;
        width: 481px;
        font-family: "微软雅黑粗体";
        font-size: 33px;
        color: #FFFFFF;
        line-height: 33px;
      }

      .contentbox1 {
        position: relative;
        left: 584px;
        top: 20px;
        display: flex;
        flex-direction: row;
        gap: 224px;

        .content1-1 {
          width: 200px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 31px;
          color: #49D2FF;
          line-height: 33px;
        }

        .content1-2 {
          width: 200px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 31px;
          color: #FFA133;
          line-height: 33px;
        }

        .content1-3 {
          width: 200px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 31px;
          color: #FF6666;
          line-height: 33px;
        }
      }

      .contentbox2 {
        flex-wrap: wrap;
        position: absolute;
        left: 1999px;
        top: 1233px;
        display: flex;
        flex-direction: row;
        gap: 74px;
        width: 1183px;

        .content2-1 {
          width: 300px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 19px;
          color: #FFFD3D;
          line-height: 33px;
        }
      }

      .contentbox4 {
        position: relative;
        left: 272px;
        top: 243px;
        gap: 20px;
        display: flex;
        flex-direction: row;

        .content4-1 {
          text-align: center;
          display: flex;
          flex-direction: column;

          .img2 {
            height: 252px;
            width: 364px;
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
        }
      }
    }
  }
}
</style>